<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('首页')"/>
    <link rel="stylesheet" th:href="@{/admin/css/other/console1.css}"/>
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">总记录表数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="totalTableNum" style="color: #28333E;">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            张
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">总记录行数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="totalRowNum" style="color: #28333E;">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            万行
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">总使用内存</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="usedMemory" style="color: #28333E;">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips" id="usedMemoryUnit">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">总分配内存</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="totalMemory" style="color: #28333E;">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips" id="totalMemoryUnit" >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">mysql 配置</h2>
                <div class="layui-colla-content" style="padding-left: 30px">
                    1.启动 mysql, 开启mysql的binlog写入功能，并且配置binlog模式为row <br>
                    2.校验是否开启 SQL:  show variables like 'log_bin'; <br>
                    CREATE USER canal IDENTIFIED BY 'canal'; <br>
                    -- 赋予查询权限，副本权限，子节点权限 如果host 是  % 使用 <br>
                    GRANT SELECT, REPLICATION SLAVE, REPLICATION CLIENT ON *.* TO 'canal'@'%'; <br>
                    -- 如果host 是 localhost使用： <br>
                    GRANT SELECT,REPLICATION SLAVE, REPLICATION CLIENT ON *.* TO canal@localhost; <br>
                    -- 允许从任何主机连接到mysql服务器的话。 <br>
                    GRANT ALL PRIVILEGES ON *.* TO 'canal'@'%' ; <br>
                    -- 刷新权限 <br>
                    FLUSH PRIVILEGES; <br>
                    -- 查询权限 <br>
                    show grants for 'canal'; <br>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">下载canal-deploy</h2>
                <div class="layui-colla-content" style="padding-left: 30px">
                    进入下载 https://github.com/alibaba/canal/releases <br>
                    下载 canal.deployer-1.1.5.tar.gz
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">canal 过滤规则 写法</h2>
                <div class="layui-colla-content" style="padding-left: 30px">
                    1. 所有表：.* or .*\..*  <br>
                    2. canal schema下所有表： canal\..*  <br>
                    3. canal下的以canal打头的表：canal\.canal.*  <br>
                    4. canal schema下的一张表：canal\.test1  <br>
                    5. 多个规则组合使用：canal\..*,mysql\.test1,mysql\.test2 (逗号分隔)
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    layui.use(['layer', 'echarts', 'element', 'count', 'topBar'], function () {
        $.ajax({
            url: '/mainInfo',
            dataType: 'json',
            contentType: 'application/json',
            type: 'get',
            success: function (result) {
                if (result.success) {
                    // 返回结果数据
                    var resultData = result.data;
                    let datasourceMemoryInfo = resultData.datasourceMemoryInfo;
                    let totalTableNumObj = datasourceMemoryInfo.totalTableNum;
                    let totalMemoryUnit = datasourceMemoryInfo.totalMemoryUnit;
                    let usedMemoryUnit = datasourceMemoryInfo.usedMemoryUnit;
                    $("#totalMemoryUnit").html(totalMemoryUnit);
                    $("#usedMemoryUnit").html(usedMemoryUnit);
                    layui.count.up("totalTableNum", {
                        time: 1000,
                        num: totalTableNumObj,
                        bit: 0,
                        regulator: 50
                    })

                    let totalRowNumObj = datasourceMemoryInfo.totalRowNum;
                    layui.count.up("totalRowNum", {
                        time: 1000,
                        num: totalRowNumObj,
                        bit: 4,
                        regulator: 50
                    })

                    let usedMemoryObj = datasourceMemoryInfo.usedMemory;
                    layui.count.up("usedMemory", {
                        time: 1000,
                        num: usedMemoryObj,
                        bit: 2,
                        regulator: 50
                    })

                    let totalMemoryObj = datasourceMemoryInfo.totalMemory;
                    layui.count.up("totalMemory", {
                        time: 1000,
                        num: totalMemoryObj,
                        bit: 2,
                        regulator: 50
                    })


                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }
        })


    });
</script>
</body>
</html>
